<template>
  <div class="films">
    <van-list
      v-model="loading"
      :error.sync="error"
      error-text="请求失败，点击重新加载"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="film-item" v-for="item in list" :key="item.filmId">
        <img class="img" :src="item.poster" alt="" />
        <p>{{ item.name }}</p>
      </div>
    </van-list>

    <!-- 
      v-model="loading"
      :value="loading"
      @input="loading = $event"

      :error.sync="error"
      :error="error"
      @update:error="error = $event"
     -->
  </div>
</template>

<script>
import { List } from "vant";
import axios from "axios";

export default {
  name: "films",

  components: {
    [List.name]: List,
  },

  data() {
    return {
      pageNum: 0, // 当前页数
      pageSize: 10, // 每页显示条数

      list: [], // 存放数据的
      total: 1, // 总条数

      loading: false, // 加载中的状态
      error: false, // 请求是否出错了
      finished: false, // 是否全部加载完数据，如果这个为ture，代表没有更多数据了。
    };
  },

  // mounted() {
  //   this.getData();
  // },

  methods: {
    /**
     * @load 的事件处理函数，每次加载都会执行这个函数，并且默认会执行一次
     */
    onLoad() {
      console.log("@onload");
      // 将 pageNum ++
      this.pageNum++;

      axios
        .get("/maizuo/gateway", {
          headers: {
            "X-Client-Info":
              '{"a":"3000","ch":"1002","v":"5.2.1","e":"1660376834309632782303233"}',
            "X-Host": "mall.film-ticket.film.list",
          },

          params: {
            cityId: "440300",
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            type: 1,
            k: 9962003,
          },
        })
        .then(({ data }) => {
          if (data.status === 0) {
            // this.list = data.data.films;
            // 做追加
            this.list.push(...data.data.films);
            this.total = data.data.total;
          } else {
            this.$toast(data.msg);
          }
        })
        .catch((error) => {
          console.error(error);
          // 各种原因出错了
          this.pageNum--; // 错了之后，重新加载的话需要还是加载当前这个页
          this.error = true;
        })
        .finally(() => {
          // 设置 loading = false, 代表这次数据请求完毕
          this.loading = false;
          // 判断是否还有更多数据  用当前 list 的总长度与 total 总条数做判断，判断是否还有下一页数据
          this.finished = this.list.length >= this.total;
        });
    },

    // getData() {
    //   axios
    //     .get("/maizuo/gateway", {
    //       headers: {
    //         "X-Client-Info":
    //           '{"a":"3000","ch":"1002","v":"5.2.1","e":"1660376834309632782303233"}',
    //         "X-Host": "mall.film-ticket.film.list",
    //       },

    //       params: {
    //         cityId: "440300",
    //         pageNum: this.pageNum,
    //         pageSize: this.pageSize,
    //         type: 1,
    //         k: 9962003,
    //       },
    //     })
    //     .then(({ data }) => {
    //       if (data.status === 0) {
    //         this.list = data.data.films;
    //         this.total = data.data.total;
    //       } else {
    //         this.$toast(data.msg);
    //       }
    //     });
    // },
  },
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
